<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>中华对联 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script type="module">
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 中国红
                        secondary: '#D4AF37', // 金色
                        accent: '#8B4513', // 棕色
                        light: '#F9F5F1', // 米色背景
                        dark: '#2D2327' // 深色文字
                    },
                    fontFamily: {
                        song: ['"Noto Serif SC"', 'serif'],
                        kai: ['"Noto Serif SC"', 'serif']
                    }
                }
            }
        }
    </script>
    <!-- 应用逻辑脚本 -->
    <script type="module">
        // 对联数据常量（从coupletData.js迁移而来）
        const dailyRecommendationData = {
            '春联': {
               上联: '一帆风顺吉星到',
               下联: '万事如意福临门',
               标签: '春联',
               点赞数: 356
            },
            '喜联': {
               上联: '红妆带绾同心结',
               下联: '碧树花开并蒂莲',
               标签: '喜联',
               点赞数: 298
            },
            '寿联': {
               上联: '福如东海长流水',
               下联: '寿比南山不老松',
               标签: '寿联',
               点赞数: 324
            },
            '名胜联': {
               上联: '清风明月本无价',
               下联: '近水遥山皆有情',
               标签: '名胜联',
               点赞数: 276
            },
            '趣味联': {
               上联: '上海自来水来自海上',
               下联: '黄山落叶松叶落山黄',
               标签: '回文联',
               点赞数: 312
            }
        };
    
        const categoryData = {
            '春联': [
                {上联: '天增岁月人增寿',下联: '春满乾坤福满楼',标签: '春联',点赞数: 238},
                {上联: '一元复始呈兴旺',下联: '万象更新展鸿图',标签: '春联',点赞数: 195},
                {上联: '春临大地百花艳',下联: '节至人间万象新',标签: '春联',点赞数: 172},
                {上联: '福星高照全家福',下联: '春光耀辉满堂春',标签: '春联',点赞数: 210},
                {上联: '迎喜迎春迎富贵',下联: '接财接福接平安',标签: '春联',点赞数: 188},
                {上联: '生意兴隆通四海',下联: '财源茂盛达三江',标签: '春联',点赞数: 205},
                {上联: '财源滚滚随春到',下联: '喜气洋洋伴福来',标签: '春联',点赞数: 176},
                {上联: '冬去山川齐秀丽',下联: '喜来桃里共芬芳',标签: '春联',点赞数: 163},
                {上联: '百世岁月当代好',下联: '千古江山今朝新',标签: '春联',点赞数: 192},
                {上联: '风调雨顺年年好',下联: '国泰民安处处春',标签: '春联',点赞数: 220}
            ],
            '喜联': [
                {上联: '百年恩爱双心结',下联: '千里姻缘一线牵',标签: '喜联',点赞数: 186},
                {上联: '红妆带绾同心结',下联: '碧树花开并蒂莲',标签: '喜联',点赞数: 164},
                {上联: '花好月圆人共老',下联: '天长地久心相印',标签: '喜联',点赞数: 145},
                {上联: '金屋笙歌偕彩凤',下联: '洞房花烛喜乘龙',标签: '喜联',点赞数: 178},
                {上联: '结成平等果',下联: '开出自由花',标签: '喜联',点赞数: 156},
                {上联: '连理枝喜结大地',下联: '比翼鸟欢翔长天',标签: '喜联',点赞数: 162},
                {上联: '碰杯邀客开宏量',下联: '举箸筵宾表至诚',标签: '喜联',点赞数: 148},
                {上联: '琴韵谱成同梦语',下联: '灯花笑对含羞人',标签: '喜联',点赞数: 170},
                {上联: '笙箫共奏齐天乐',下联: '琴瑟同调满庭芳',标签: '喜联',点赞数: 154},
                {上联: '堂开蓬莱景',下联: '人醉武陵春',标签: '喜联',点赞数: 166}
            ],
            '寿联': [
                {上联: '福如东海长流水',下联: '寿比南山不老松',标签: '寿联',点赞数: 154},
                {上联: '松龄长岁月',下联: '鹤语寄春秋',标签: '寿联',点赞数: 132},
                {上联: '愿献南山寿',下联: '先开北海樽',标签: '寿联',点赞数: 118},
                {上联: '青松多寿色',下联: '丹桂有丛香',标签: '寿联',点赞数: 147},
                {上联: '青松添寿色',下联: '丹桂誉芬芳',标签: '寿联',点赞数: 135},
                {上联: '盛世人长寿',下联: '神州物阜丰',标签: '寿联',点赞数: 129},
                {上联: '岁老根弥壮',下联: '阳骄叶更阴',标签: '寿联',点赞数: 141},
                {上联: '室有芝兰寿自韵',下联: '人如松柏岁长新',标签: '寿联',点赞数: 150},
                {上联: '福同天地共在',下联: '寿与日月同辉',标签: '寿联',点赞数: 162},
                {上联: '德为世重',下联: '寿以人尊',标签: '寿联',点赞数: 138}
            ],
            '名胜联': [
                {上联: '四面湖山归眼底',下联: '万家忧乐到心头',标签: '名胜联',点赞数: 215},
                {上联: '日照香炉生紫烟',下联: '遥看瀑布挂前川',标签: '名胜联',点赞数: 189},
                {上联: '黄鹤一去不复返',下联: '白云千载空悠悠',标签: '名胜联',点赞数: 167},
                {上联: '五岳归来不看山',下联: '黄山归来不看岳',标签: '名胜联',点赞数: 198},
                {上联: '长江万里白如练',下联: '淮山数点青如淀',标签: '名胜联',点赞数: 175},
                {上联: '山高自有客行路',下联: '水深自有渡船人',标签: '名胜联',点赞数: 182},
                {上联: '两岸青山相对出',下联: '孤帆一片日边来',标签: '名胜联',点赞数: 190},
                {上联: '水光潋滟晴方好',下联: '山色空蒙雨亦奇',标签: '名胜联',点赞数: 203},
                {上联: '会当凌绝顶',下联: '一览众山小',标签: '名胜联',点赞数: 186},
                {上联: '湖光秋月两相和',下联: '潭面无风镜未磨',标签: '名胜联',点赞数: 178}
            ],
            '趣味联': [
                {上联: '客上天然居',下联: '居然天上客',标签: '回文联',点赞数: 178},
                {上联: '上海自来水来自海上',下联: '黄山落叶松叶落山黄',标签: '回文联',点赞数: 156},
                {上联: '花甲重逢增加三七岁月',下联: '古稀双庆更多一度春秋',标签: '数字联',点赞数: 142},
                {上联: '烟锁池塘柳',下联: '炮镇海城楼',标签: '五行联',点赞数: 168},
                {上联: '一孤舟，二客商，三四五六水手，扯起七八页风篷，下九江，还有十里',下联: '十里运，九里香，八七六五号轮，虽走四三年旧道，只二日，胜似一年',标签: '数字联',点赞数: 182},
                {上联: '南通州，北通州，南北通州通南北',下联: '东当铺，西当铺，东西当铺当东西',标签: '方位联',点赞数: 175},
                {上联: '冻雨洒窗，东二点西三点',下联: '切瓜分客，上七刀下八刀',标签: '拆字联',点赞数: 163},
                {上联: '千年老树为衣架',下联: '万里长江作浴盆',标签: '趣味联',点赞数: 154},
                {上联: '因荷而得藕',下联: '有杏不须梅',标签: '谐音联',点赞数: 171},
                {上联: '风风雨雨，暖暖寒寒，处处寻寻觅觅',下联: '莺莺燕燕，花花叶叶，卿卿暮暮朝朝',标签: '叠字联',点赞数: 186}
            ]
        };
    
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('py-2');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2');
            }
        });

        // 收藏按钮功能
        document.querySelectorAll('button:has(.fa-bookmark-o)').forEach(button => {
            button.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('fa-bookmark-o')) {
                    icon.classList.remove('fa-bookmark-o');
                    icon.classList.add('fa-bookmark');
                    this.classList.remove('text-gray-400');
                    this.classList.add('text-primary');
                } else {
                    icon.classList.remove('fa-bookmark');
                    icon.classList.add('fa-bookmark-o');
                    this.classList.remove('text-primary');
                    this.classList.add('text-gray-400');
                }
            });
        });

        /**
         * 渲染每日推荐内容
         * @param {string} category - 对联分类
         */
        function renderDailyRecommendation(category) {
            const recommendation = dailyRecommendationData[category];
            if (!recommendation) return;
            
            const upperElement = document.getElementById('daily-upper');
            const lowerElement = document.getElementById('daily-lower');
            const tagElement = document.getElementById('daily-tag');
            const likeBtn = document.getElementById('daily-like-btn');
            const container = document.getElementById('daily-recommendation-container');
            
            // 添加淡入动画效果
            container.style.opacity = '0';
            
            // 延迟更新内容，以便显示动画效果
            setTimeout(() => {
                upperElement.textContent = recommendation.上联;
                lowerElement.textContent = recommendation.下联;
                tagElement.textContent = recommendation.标签;
                likeBtn.innerHTML = `<i class="fa fa-thumbs-up mr-1"></i> 喜欢 (${recommendation.点赞数})`;
                likeBtn.classList.remove('text-primary');
                likeBtn.classList.add('text-gray-400');
                
                // 恢复不透明度，显示内容
                container.style.transition = 'opacity 0.3s ease-in-out';
                container.style.opacity = '1';
            }, 150);
        }

        // 喜欢按钮功能
        document.querySelectorAll('button:has(.fa-thumbs-up)').forEach(button => {
            button.addEventListener('click', function() {
                const likeCount = this.textContent.trim().match(/\d+/);
                if (likeCount) {
                    const count = parseInt(likeCount[0]);
                    if (this.classList.contains('text-gray-400')) {
                        this.textContent = ' ' + (count + 1);
                        this.classList.remove('text-gray-400');
                        this.classList.add('text-primary');
                    } else {
                        this.textContent = ' ' + (count - 1);
                        this.classList.remove('text-primary');
                        this.classList.add('text-gray-400');
                    }
                    // 重新添加图标
                    this.prepend(document.createElement('i')).className = 'fa fa-thumbs-up mr-1';
                }
            });
        });

        /**
         * 渲染对联列表
         * @param {string} category - 对联分类
         */
        function renderCouplets(category) {
            const container = document.getElementById('couplets-container');
            const data = categoryData[category];
            
            // 清空容器
            container.innerHTML = '';
            
            // 添加淡入动画类
            container.classList.add('opacity-0', 'transition-opacity', 'duration-300');
            
            // 填充新内容
            setTimeout(() => {
                data.forEach(couplet => {
                    const coupletElement = document.createElement('div');
                    coupletElement.className = 'bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow';
                    coupletElement.innerHTML = `
                        <div class="p-4">
                            <div class="font-kai text-center py-2">
                                <p class="text-[clamp(1rem,3vw,1.2rem)] mb-2 leading-relaxed">${couplet.上联}</p>
                                <p class="text-[clamp(1rem,3vw,1.2rem)] leading-relaxed border-t border-gray-100 pt-2">${couplet.下联}</p>
                            </div>
                            <div class="flex justify-between items-center mt-3 pt-3 border-t border-gray-100">
                                <span class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">${couplet.标签}</span>
                                <div class="flex space-x-4">
                                    <button class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                                        <i class="fa fa-thumbs-up mr-1"></i> ${couplet.点赞数}
                                    </button>
                                    <button class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                                        <i class="fa fa-bookmark-o mr-1"></i> 收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;
                    container.appendChild(coupletElement);
                });
                
                // 重新注册收藏按钮事件
                registerBookmarkEvents();
                // 重新注册喜欢按钮事件
                registerLikeEvents();
                
                // 显示内容
                container.classList.remove('opacity-0');
            }, 150);
        }

        // 注册收藏按钮事件
        function registerBookmarkEvents() {
            document.querySelectorAll('button:has(.fa-bookmark-o)').forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    if (icon.classList.contains('fa-bookmark-o')) {
                        icon.classList.remove('fa-bookmark-o');
                        icon.classList.add('fa-bookmark');
                        this.classList.remove('text-gray-400');
                        this.classList.add('text-primary');
                    } else {
                        icon.classList.remove('fa-bookmark');
                        icon.classList.add('fa-bookmark-o');
                        this.classList.remove('text-primary');
                        this.classList.add('text-gray-400');
                    }
                });
            });
        }

        // 注册喜欢按钮事件
        function registerLikeEvents() {
            document.querySelectorAll('button:has(.fa-thumbs-up)').forEach(button => {
                button.addEventListener('click', function() {
                    const likeCount = this.textContent.trim().match(/\d+/);
                    if (likeCount) {
                        const count = parseInt(likeCount[0]);
                        if (this.classList.contains('text-gray-400')) {
                            this.textContent = ' ' + (count + 1);
                            this.classList.remove('text-gray-400');
                            this.classList.add('text-primary');
                        } else {
                            this.textContent = ' ' + (count - 1);
                            this.classList.remove('text-primary');
                            this.classList.add('text-gray-400');
                        }
                        // 重新添加图标
                        this.prepend(document.createElement('i')).className = 'fa fa-thumbs-up mr-1';
                    }
                });
            });
        }

        /**
         * 初始化每日推荐按钮事件
         */
        function initDailyRecommendationEvents() {
            // 每日推荐喜欢按钮
            const likeBtn = document.getElementById('daily-like-btn');
            likeBtn.addEventListener('click', function() {
                if (this.classList.contains('text-gray-400')) {
                    this.classList.remove('text-gray-400');
                    this.classList.add('text-primary');
                } else {
                    this.classList.remove('text-primary');
                    this.classList.add('text-gray-400');
                }
            });
            
            // 每日推荐收藏按钮
            const bookmarkBtn = document.getElementById('daily-bookmark-btn');
            bookmarkBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                if (icon.classList.contains('fa-bookmark-o')) {
                    icon.classList.remove('fa-bookmark-o');
                    icon.classList.add('fa-bookmark');
                    this.classList.remove('text-gray-400');
                    this.classList.add('text-primary');
                } else {
                    icon.classList.remove('fa-bookmark');
                    icon.classList.add('fa-bookmark-o');
                    this.classList.remove('text-primary');
                    this.classList.add('text-gray-400');
                }
            });
        }

        // 初始化分类切换功能
        function initCategorySwitch() {
            // 添加CSS样式
            const style = document.createElement('style');
            style.textContent = `
                .category-icon {
                    transition: all 0.3s ease;
                }
                .category-text {
                    transition: all 0.3s ease;
                }
                .category-active {
                    transform: scale(1.1);
                    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
                }
                .category-text-active {
                    font-weight: bold;
                    color: #C41E3A;
                }
                .category-item {
                    z-index: 1;
                }
            `;
            document.head.appendChild(style);
            
            // 添加分类点击事件
            // 使用事件委托方式添加事件监听
            const categoryContainer = document.querySelector('.grid.grid-cols-5.gap-3');
            if (categoryContainer) {
                categoryContainer.addEventListener('click', function(event) {
                    const categoryItem = event.target.closest('.category-item');
                    if (categoryItem) {
                        const category = categoryItem.getAttribute('data-category');
                        console.log('分类切换到:', category);
                        
                        // 更新选中状态
                        document.querySelectorAll('.category-icon').forEach(icon => {
                            icon.classList.remove('category-active');
                        });
                        document.querySelectorAll('.category-text').forEach(text => {
                            text.classList.remove('category-text-active');
                        });
                        
                        categoryItem.querySelector('.category-icon').classList.add('category-active');
                        categoryItem.querySelector('.category-text').classList.add('category-text-active');
                        
                        // 更新标题
                        const titleElement = document.getElementById('category-title');
                        if (titleElement) {
                            titleElement.textContent = `热门${category}`;
                        }
                        
                        // 渲染对应分类的对联
                        renderCouplets(category);
                        
                        // 同时更新每日推荐内容
                        renderDailyRecommendation(category);
                    }
                });
            } else {
                console.warn('未找到分类容器元素');
                // 备选方案：直接为每个分类项添加事件监听器
                const categoryItems = document.querySelectorAll('.category-item');
                console.log('找到的分类项数量:', categoryItems.length);
                categoryItems.forEach(item => {
                    item.addEventListener('click', function() {
                        const category = this.getAttribute('data-category');
                        console.log('备选方案 - 分类切换到:', category);
                        
                        // 更新选中状态
                        document.querySelectorAll('.category-icon').forEach(icon => {
                            icon.classList.remove('category-active');
                        });
                        document.querySelectorAll('.category-text').forEach(text => {
                            text.classList.remove('category-text-active');
                        });
                        
                        this.querySelector('.category-icon').classList.add('category-active');
                        this.querySelector('.category-text').classList.add('category-text-active');
                        
                        // 更新标题
                        const titleElement = document.getElementById('category-title');
                        if (titleElement) {
                            titleElement.textContent = `热门${category}`;
                        }
                        
                        // 渲染对应分类的对联
                        renderCouplets(category);
                        
                        // 同时更新每日推荐内容
                        renderDailyRecommendation(category);
                    });
                });
            }
            
            // 初始渲染春联
            renderCouplets('春联');
        }

        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            // 初始化分类切换
            initCategorySwitch();
            
            // 初始化每日推荐按钮事件
            initDailyRecommendationEvents();
            
            // 初始渲染每日推荐内容（春联）
            renderDailyRecommendation('春联');
        });
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c41e3a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
    
    <!-- 导入字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>

<body class="bg-light bg-pattern text-dark min-h-screen font-song pb-20">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-primary text-white shadow-md transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-leaf text-lg"></i>
                <h1 class="text-[clamp(1.25rem,5vw,1.75rem)] font-kai font-bold tracking-wider">
                    中华对联
                </h1>
            </div>
            <div class="flex space-x-2">
                <button class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                    <i class="fa fa-search text-lg"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-primary/80 transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 轮播图 -->
        <section class="mb-6">
            <div class="relative rounded-xl overflow-hidden shadow-md">
                <img src="https://picsum.photos/id/1/800/300" alt="对联文化" class="w-full h-[clamp(120px,30vw,200px)] object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-dark/70 to-transparent flex flex-col justify-end p-4">
                    <h2 class="text-white text-[clamp(1.2rem,4vw,1.5rem)] font-kai font-bold mb-1">新春对联特辑</h2>
                    <p class="text-white/80 text-sm">传承经典，品味中华文化瑰宝</p>
                </div>
            </div>
        </section>

        <!-- 分类导航 -->
        <section class="mb-6">
            <div class="grid grid-cols-5 gap-3">
                <div class="category-item flex flex-col items-center cursor-pointer" data-category="春联">
                    <div class="w-14 h-14 rounded-full bg-red-100 flex items-center justify-center mb-1 category-icon category-active">
                        <i class="fa fa-fire text-primary text-xl"></i>
                    </div>
                    <span class="text-xs category-text category-text-active">春联</span>
                </div>
                <div class="category-item flex flex-col items-center cursor-pointer" data-category="喜联">
                    <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-1 category-icon">
                        <i class="fa fa-heart text-pink-500 text-xl"></i>
                    </div>
                    <span class="text-xs category-text">喜联</span>
                </div>
                <div class="category-item flex flex-col items-center cursor-pointer" data-category="寿联">
                    <div class="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center mb-1 category-icon">
                        <i class="fa fa-star text-yellow-500 text-xl"></i>
                    </div>
                    <span class="text-xs category-text">寿联</span>
                </div>
                <div class="category-item flex flex-col items-center cursor-pointer" data-category="名胜联">
                    <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-1 category-icon">
                        <i class="fa fa-building text-blue-500 text-xl"></i>
                    </div>
                    <span class="text-xs category-text">名胜联</span>
                </div>
                <div class="category-item flex flex-col items-center cursor-pointer" data-category="趣味联">
                    <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-1 category-icon">
                        <i class="fa fa-magic text-purple-500 text-xl"></i>
                    </div>
                    <span class="text-xs category-text">趣味联</span>
                </div>
            </div>
        </section>

        <!-- 每日推荐 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="w-1 h-5 bg-primary inline-block mr-2 rounded-full"></span>
                    每日推荐
                </h2>
                <a href="daily_recommendations.html" class="text-xs text-gray-500 flex items-center">
                    更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div id="daily-recommendation-container" class="bg-white rounded-xl shadow-sm p-4">
                <div class="font-kai text-center py-4">
                    <p id="daily-upper" class="text-[clamp(1.25rem,5vw,1.75rem)] mb-3 leading-relaxed">一帆风顺吉星到</p>
                    <p id="daily-lower" class="text-[clamp(1.25rem,5vw,1.75rem)] leading-relaxed border-t border-gray-100 pt-3">万事如意福临门</p>
                </div>
                <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
                    <span id="daily-tag" class="text-xs bg-secondary/10 text-accent px-2 py-1 rounded-full">春联</span>
                    <div class="flex space-x-4">
                        <button id="daily-like-btn" class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                            <i class="fa fa-thumbs-up mr-1"></i> 喜欢 (356)
                        </button>
                        <button id="daily-bookmark-btn" class="text-gray-400 hover:text-primary transition-colors flex items-center text-sm">
                            <i class="fa fa-bookmark-o mr-1"></i> 收藏
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门对联 -->
        <section class="mb-6">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-bold flex items-center">
                    <span class="w-1 h-5 bg-primary inline-block mr-2 rounded-full"></span>
                    <span id="category-title">热门春联</span>
                </h2>
                <a href="hot_couplets.html" class="text-xs text-gray-500 flex items-center">
                    更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div id="couplets-container" class="space-y-3">
                <!-- 对联内容将通过JavaScript动态填充 -->
            </div>
        </section>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-1px_3px_rgba(0,0,0,0.1)] py-2 z-40">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="create.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-pencil text-lg"></i>
                    <span class="text-xs mt-1">创作</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </footer>
</body>
</html>